<template>
  <div class="centered-content">
    <div class="registration-form">
      <div class="form-title">高校办公用品管理系统</div>
      <el-form ref="employee" status-icon :model="employee" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="employee.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="employee.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="employee.confirmPassword" type="password" placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="userType">
          <el-select v-model="employee.userType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('employee')">注册</el-button>
          <router-link to="/login">已有账号？点击登录</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register } from '@/api/register'
export default {
  name: 'RegisterPage',
  data () {
    const namePass = (rule, value, callback) => {
      if (value === 'admin1') {
        callback(new Error('该用户名已存在'))
      } else {
        callback()
      }
    }
    const vanidPwd1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        callback()
      }
    }
    const vanidPwd2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else if (value !== this.employee.password) {
        callback(new Error('密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      employee: {
        name: 'emp1',
        password: '123456',
        userType: 2,
        confirmPassword: '123456'
      },
      options: [
        {
          value: 1,
          label: '教职工'
        },
        {
          value: 2,
          label: '仓库管理员'
        },
        {
          value: 9,
          label: '管理员'
        }
      ],
      namePass: '',
      pwd1: '',
      pwd2: '',
      // 自定义表单校验规则
      rules: {
        name: [
          { validator: namePass, trigger: 'blur' }
        ],
        password: [
          { validator: vanidPwd1, trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: vanidPwd2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      const this_ = this
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await register(this_.employee)
          console.log(res)

          this_.$router.push('/login')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #e5e5f7;
  background-image: radial-gradient(#444cf7 10%, transparent 10%), radial-gradient(#444cf7 10%, transparent 10%);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.registration-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ffffff; /* 设置表单背景颜色 */
}

.form-title {
  font-size: 24px;
  color: rgb(72, 104, 207); /* 设置标题字体颜色为蓝色 */
  margin-bottom: 20px;
  text-align: center;
}
a:-webkit-any-link {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    color: rgba(11, 47, 155, 0.918);
    cursor: pointer;
    text-decoration: none;
}
a:-webkit-any-link:hover{
  text-decoration: underline;
  color: rgba(16, 75, 252, 0.918);
}
.centered-content{
  background: url('@/assets/1604501034-IMG74.jpg');
}
</style>
